<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Like - Click Effect @VincentTV</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 100vh;
    }

    .wrap {
      margin: 0 auto;
      width: 200px;
      height: 200px;

    }

    .like-copy {
      top: 100px;
    }

    .like,
    .like-copy {
      position: absolute;
      color: #ccc;
      font-size: 20px;
      user-select: none;
    }

    .active {
      color: red;
    }
  </style>
</head>

<body>
  <div class="wrap">

    <div class="like-copy flex"><i class="fas fa-heart"></i><span>Like</span></div>
  </div>

  <!-- <script src="./addLike.js"></script> -->
  <script>
  //  `<i class="fas fa-heart"></i><span>+1</span>`;
  </script>
  <script>

    ; (
      function (w, doc) {
        const oBody = doc.querySelector('body');
        const likeArr = []
        const moveLike = () => {
          let item = null;

          for (let i = 0; i < likeArr.length; i++) {
            item = likeArr[i];
            if (item.opacity <= 0) {
              console.log('ok');
              oBody.removeChild(item.el);
              likeArr.splice(i, 1)
              return
            }
            item.top--;
            item.opacity -= .01;
            item.scale += .01;
            item.el.style.cssText = `    top: ${item.top}px;
        left:${item.left}px;
        color:${item.color};
        opacity:${item.opacity};
        transform:scale(${item.scale});
        `
          }
          requestAnimationFrame(moveLike)
        }
        const getColor = () => 256 * Math.random()
        const addLike = (e) => {
          const oDiv = doc.createElement('div');
          oDiv.className = 'like';
          oDiv.innerHTML = `<i class="fas fa-heart"></i><span>+1</span>`;
          oBody.appendChild(oDiv);
          likeArr.push({
            el: oDiv,
            color: `rgb(${getColor()} ,${getColor()},${getColor()}  )`,
            opacity: 1,
            top: e.clientY - 10,
            left: e.clientX - 10,
            scale: 1
          })
          moveLike()
        }
        oBody.addEventListener('click', e => {
          addLike(e)
        }, false)
        doc.querySelector('.like-copy').addEventListener('click', e => {
          e.stopPropagation();
          e.target.classList.toggle('active')
          addLike(e)
        }, false)
      }
    )(window, document)
  </script>
</body>

</html>